
<template>
  <div ref="fullscreenElement">
    <Modelheader
      @clearData="clearData"
      @autotypeDate="autotypeDate"
      :examStatus="examStatus"
    ></Modelheader>
    <div>
      <div class="cropperBox">
        <div
          class="cropperImageset"
          @mousedown="startDrag"
          @mousemove="onDrag"
          @mouseup="stopDrag"
          @mouseleave="stopDrag"
          :style="{
            cursor: isDragging ? 'grabbing !important' : 'grab !important',
          }"
        >
          <ImageSelector
            ref="childComponent"
            @isDrawingChange="isDrawingChange"
            :scale="scale"
            :startX="startX"
            :startY="startY"
            :offsetX="offsetX"
            :offsetY="offsetY"
            :isDragging="isDragging"
            :style="{
              transform: `translate(${offsetX}px, ${offsetY}px) scale(${
                scale / 100
              })`,
            }"
            @newRectangle="newRectangle"
            :drawStatus="drawStatus"
            :pagevale="pagevale"
            :imageUrllist="modelenews"
            @modeltype="modeltype"
            :modelarealistcavans="modelarealistcavans"
            @refreshdata="refreshdata"
            @objbasicparameters="objbasicparameters"
          />
          <div class="templatePage">
            <div
              v-for="(item, index) in modelenews"
              :key="index"
              :class="pagevale - 1 == index ? 'hover imgbox' : 'imgbox'"
              @click="changeImage(index)"
            >
              {{ index + 1 }}
            </div>
          </div>
          <div class="templatePage1" style="width: 350px">
            <!-- 进度条缩放 -->
            <el-slider
              v-model="scale"
              :min="1"
              :max="100"
              show-input
              style="width: 100%"
            >
            </el-slider>
          </div>
          <div
            class="selectquestionitemHover"
            v-if="selectquestionitemIshow"
            :style="{
              width: selectquestionitem.width + 'px',
              height: selectquestionitem.height + 'px',
              background: 'rgba(255,0,0,0.4)',
              position: 'absolute',
              left: selectquestionitem.x + 'px',
              top: selectquestionitem.y + 'px',
              zIndex: 1000,
            }"
          ></div>
          <div v-if="selectquestionitemIshow">
            <template v-if="selectquestionitem.examTemplateFieldList != null">
              <div
                v-for="item in selectquestionitem.examTemplateFieldList"
                :style="{
                  width: item.width + 'px',
                  height: item.height + 'px',
                  background: 'rgba(16,255,0,0.4)',
                  position: 'absolute',
                  left: item.x + 'px',
                  top: item.y + 'px',
                  zIndex: 1001,
                }"
              ></div>
            </template>
          </div>
        </div>
        <div class="uploadcardInfo">
          <h3>客观题</h3>
          <div class="kgtboxscorll" ref="myElement">
            <div
              :class="
                bigquestionindex == index
                  ? 'examnumbercontent hover'
                  : 'examnumbercontent'
              "
              v-for="(item, index) in objectivelistdata"
              :key="item.id"
              @click="objectaddclite(item, 6, index)"
            >
              <b
                >{{ item.questionTypeName }}-{{ item.questionNumber }}*
                {{ item.direction == 1 ? "横向" : "纵向" }}* 满分*：{{
                  item.fullScore
                }}分
                <i
                  :class="
                    item.examTemplateFieldList &&
                    item.examTemplateFieldList.length == item.optionCount
                      ? 'hover'
                      : ''
                  "
                  >（{{
                    item.examTemplateFieldList &&
                    item.examTemplateFieldList.length == item.optionCount
                      ? "已框选"
                      : "未框选"
                  }}）</i
                ></b
              >
              <div class="nameexamnum">
                <ul class="examnumberset">
                  <template v-for="(option, num) in optionArea">
                    <li
                      v-if="num < item.optionCount"
                      @click.stop="
                        chooseoption(item.id, 6, num, index, item, option)
                      "
                      :class="{ hover: isHovered(num, index) }"
                    >
                      {{ option }}
                    </li>
                  </template>
                  <!-- <li v-for="(item,index) in optionArea" v-if="index>item.optionCount">{{item}}</li> -->
                </ul>
                <div>
                  <!-- <i>编辑</i> -->
                  <span @click="objectivedelete(item.id)" v-if="examStatus == 0"
                    >删除</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="xinzeplxtbutton" v-if="examStatus == 0">
            <span @click="plxzobjgt">批量新增客观题</span>
            <span @click="bactcheditobjgt">批量编辑客观题</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 批量新增客观题 -->
    <Btchaddobjective
      v-if="addobjquestionIshow"
      @closeobjective="closeobjective"
      :questiontypelist="questiontypelist"
      :pagevale="pagevale"
      :objectivelistdata="objectivelistdata"
    ></Btchaddobjective>
    <!-- 批量编辑 -->
    <Btcheditobjective
      @updateObjectivelistdata="updateObjectivelistdata"
      v-if="editobjectivequestions"
      :objectivelistdata="objectivelistdata"
      @updateobjectivequestionssurebc="updateobjectivequestionssurebc"
      :questiontypelist="questiontypelist"
    ></Btcheditobjective>
  </div>
</template>

<script>
import ImageSelector from "../../components/model/positioningarea.vue"; //切图
import Modelheader from "../../components/model/modelhead.vue";
import Btchaddobjective from "../../components/model/batchaddobjective.vue"; //批量新增客观题
import Btcheditobjective from "../../components/model/editobjectively.vue"; //批量编辑客观题
import {
  templateIdinfo,
  templateobjectiveDate,
  batchdeleteobjetive,
  basicinfoCanvasimg,
  addobjectquestion,
  bascInfodelete,
  basicQuestionTypeList,
} from "../../api/paperinfo/paperinfo.js";
// import {questionlist} from "@/api/jcgl/txgl";
export default {
  name: "App",
  data() {
    return {
      scale: 100,
      isDragging: false,
      noFragging: false,
      startX: 0,
      startY: 0,
      offsetX: 0,
      offsetY: 0,
      isDrawing: false,

      navbar: [
        {
          name: "模板信息及上传",
          id: 0,
        },
        {
          name: "水平定位",
          id: 1,
        },
        {
          name: "定位区",
          id: 2,
        },
        {
          name: "准考证号区",
          id: 3,
        },
        {
          name: "客观题区",
          id: 4,
        },
        {
          name: "主观题区",
          id: 5,
        },
      ],
      optionArea: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      //  optionArea:['A','B','C','D'],
      tabnavindex: 0,
      examclassify: "",
      examclassifylist: ["条形码", "涂点", "手写"],
      examNumber: "",
      examNumberlist: [
        4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
      ],
      cardNumber: 2,
      cardNumberlist: [2, 4, 6],
      cardColor: "",
      cardColorlist: ["黑色", "灰色", "彩色"],
      examdpi: "",
      examdpilist: [150, 200, 300],
      images: [],
      questiontype: "",
      selectradio: 1,
      fillinWidth: 0,
      fillinHeight: 0,
      intervalWidth: 0,
      intervalHeight: 0,
      modelobj: {
        id: 0,
        examId: 0,
        examCourseId: 0,
        examNoLength: 4,
        answerCardPages: 2,
        status: 0,
        templateImages: [],
      },
      moduleImageurl: {},
      templateId: "", //模板id
      examCourseId: "", //考试科目id
      modeldata: {
        templateId: 0,
        examCourseId: 0,
        templateAreaType: 1,
      },
      positioningare: {
        id: 0,
        templateId: 0,
        templateAreaType: 0,
        templateCuttingRegion: [],
      },
      modeltypequestion: [],
      modelarealist: [],
      modelarealistcavans: [],
      examInfo: {},
      editmodelishow: false,
      pagevale: 1,
      modelenews: [],
      examName: "",
      telemplatelist: [],
      isFullscreen: false, // 当前是否处于全屏状态
      activeName: "1",
      addobjquestionIshow: false,
      objectivelistdata: [],
      editobjectivequestions: false,
      questiontypelist: [],
      clittype: "",
      clitname: "",
      bigquestionindex: -1,
      questionid: "",
      drawStatus: false,
      contentdraw: {},
      bigquestiontype: 1,
      selectquestionitem: {},
      hoveredIndex: null, // 当前悬停的 index
      hoverindexclas: null,
      selectquestionitemIshow: false,
      smallquestionObj: {},
      examStatus: "",
      loadingishow: false,
    };
  },
  mounted() {
    // 监听全屏状态变化
    document.onfullscreenchange = this.handleFullscreenChange;
    setTimeout(() => {
      this.modeltab();
    }, 1000);
    this.modeltab(); //获取模板图片
    this.getObjectivelist(); //获取客观题列表
    this.getList();
    // 添加全局点击监听
    document.addEventListener("click", this.handleClickOutside);
  },
  methods: {
    isHovered(num, index) {
      return this.hoveredIndex === num && this.hoverindexclas === index;
    },
    objectaddclite(con, type, index) {
      this.contentdraw = con;
      this.drawStatus = true;
      this.clittype = type;
      this.clitname = con.questionNumber;
      this.bigquestionindex = index;
      this.questionid = con.id;
      this.bigquestiontype = 1;
      this.selectquestionitem = con;
      console.info("con", con);
      this.selectquestionitemIshow = true;
    },
    chooseoption(questionid, type, num, index, con, options) {
      this.hoveredIndex = num;
      this.hoverindexclas = index;
      this.drawStatus = true;
      this.bigquestiontype = 2;
      this.questionid = questionid;
      this.clittype = type;
      this.clitname = options;
      let objsmall = con.examTemplateFieldList.filter(
        (item) => item.fieldName == options
      );
      this.smallquestionObj = objsmall[0];
    },
    //切图坐标点
    newRectangle(val) {
      console.info("val", val);
      if (this.bigquestiontype === 1) {
        this.contentdraw.x = val.x;
        this.contentdraw.y = val.y;
        this.contentdraw.width = val.width;
        this.contentdraw.height = val.height;
        delete this.contentdraw._isModified;
        addobjectquestion([this.contentdraw]).then((res) => {
          console.info(res);
          if (res.code == 200) {
            this.getObjectivelist();
            this.drawStatus = false;
            this.selectquestionitemIshow = false;
          } else {
            this.$message.error(res.msg);
          }
        });
      } else {
        let option = {
          templateId: this.$route.query.templateId,
          page: this.pagevale,
          fieldType: this.clittype,
          fieldName: this.clitname,
          x: val.x,
          y: val.y,
          width: val.width,
          height: val.height,
          sort: 0,
          questionId: this.questionid,
        };
        // console.info(option)
        basicinfoCanvasimg(option).then((res) => {
          console.info(res);
          if (res.code == 200) {
            this.getObjectivelist();
            this.drawStatus = false;
            this.selectquestionitemIshow = false;
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    //单个删除objectivedelete
    objectivedelete(id) {
      console.info(this.smallquestionObj, "ddddddd");
      if (
        this.smallquestionObj &&
        Object.keys(this.smallquestionObj).length !== 0
      ) {
        this.smalldeleteCon(this.smallquestionObj.id);
      } else {
        this.bigdeleteCon(id);
      }
    },
    //删除大题
    bigdeleteCon(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          batchdeleteobjetive([id]).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getObjectivelist();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除小题
    smalldeleteCon(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          bascInfodelete(id).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getObjectivelist();
              this.selectquestionitemIshow = false;
              this.smallquestionObj = {};
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getList() {
      basicQuestionTypeList({ examSubjectId: this.$route.query.examId })
        .then((response) => {
          this.questiontypelist = response.rows.filter(
            (question) => question.subjectiveType === 2
          );
          // this.total = response.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 根据字典值和字典类型查找对应的 label
    getMatchedLabel(value) {
      console.info("this.questiontypelist", this.questiontypelist);
      const matchedItem = this.questiontypelist.find(
        (item) => item.id == value
      );
      console.info("matchedItem", matchedItem);
      return matchedItem ? matchedItem.questionName : undefined;
    },
    //批量新增客观题
    plxzobjgt() {
      this.addobjquestionIshow = true;
    },
    //保存客观题成功
    closeobjective(data) {
      this.addobjquestionIshow = false;
      if (data == 1) {
        //走一遍获取客观题接口
        this.getObjectivelist();
      }
    },
    //编辑保存
    updateobjectivequestionssurebc(data) {
      this.editobjectivequestions = false;
      if (data == 1) {
        //走一遍获取客观题接口
        this.getObjectivelist();
      }
    },
    //批量编辑展开
    bactcheditobjgt() {
      this.editobjectivequestions = true;
    },
    autotypeDate() {
      this.getObjectivelist();
    },
    //获取客观题列表
    getObjectivelist() {
      this.loadingishow = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let obj = {
        examTemplateId: this.$route.query.templateId,
      };
      templateobjectiveDate(obj)
        .then((res) => {
          console.info(res);
          if (res.code == 200) {
            const transformData = (data) => {
              return data.map((item) => {
                // Create a shallow copy of the item
                const newItem = { ...item };
                newItem.options = item.examTemplateFieldList;

                return newItem;
              });
            };
            this.modelarealistcavans = transformData(res.data)
              .filter((item) => item.page == this.pagevale)
              .map((item) => ({
                ...item,
                templatePointType: `${
                  item.questionTypeName ? item.questionTypeName : ""
                } ${item.questionNumber}`,
              }));
            this.objectivelistdata = res.data.map((item) => ({
              ...item,
              _isModified: false, // 初始化时标记为未修改
            }));
            this.loadingishow.close();
          } else {
            this.$message({
              message: res.msg,
              type: "warning",
            });
            this.loadingishow.close();
          }
        })
        .finally(() => {
          this.loadingishow.close();
        });
    },
    changeImage(index) {
      this.pagevale = index + 1;
      this.getObjectivelist();
    },
    // 获取模板
    modeltab() {
      let obj = {
        templateId: this.$route.query.templateId,
      };
      templateIdinfo(obj).then((res) => {
        console.info(res);
        if (res.code == 200) {
          this.modelenews = res.data;
          this.positioningare.id = res.data.id;
          this.examStatus = res.data && res.data[0].editStatus;
        }
      });
    },
    quiteclick() {
      this.$router.push("/examoverview");
    },
    canceleditbox() {
      this.editishow = false;
      this.editmodelishow = false;
    },
    objbasicparameters() {
      this.editishow = false;
      this.editmodelishow = false;
    },
    refreshdata() {
      this.modeltab();
    },
    modeltype(data) {
      this.modeltypequestion.push(data);
    },
    clearData() {
      this.getObjectivelist();
    },
    pagevalueindex(val) {
      this.pagevale = val;
      this.modelinfo(this.templateId);
    },
    // 切换全屏
    toggleFullscreen() {
      if (!document.fullscreenEnabled) {
        alert("您的浏览器不支持全屏功能！");
        return;
      }

      if (this.isFullscreen) {
        // 退出全屏
        document.exitFullscreen();
        this.$refs.fullscreenElement.style.overflow = "auto";
      } else {
        // 进入全屏
        this.$refs.fullscreenElement.requestFullscreen();
        this.$refs.fullscreenElement.style.overflow = "auto";
      }
    },
    // 处理全屏状态变化
    handleFullscreenChange() {
      this.isFullscreen = !document.fullscreenElement;
    },
    handleClickOutside(event) {
      const target = this.$refs.myElement;
      if (target && !target.contains(event.target)) {
        // 点击的是外部
        this.hoverindexclas = null;
        this.hoveredIndex = null;
        this.selectquestionitemIshow = false;
      }
    },
    // 拖拽
    startDrag(e) {
      if (!this.noFragging && !this.isDrawing) {
        this.isDragging = true;
        this.startX = e.clientX - this.offsetX;
        this.startY = e.clientY - this.offsetY;
      }
    },
    onDrag(e) {
      if (!this.noFragging && !this.isDrawing) {
        if (!this.isDragging) return;
        this.offsetX = e.clientX - this.startX;
        this.offsetY = e.clientY - this.startY;
      }
    },
    stopDrag() {
      if (!this.noFragging && !this.isDrawing) {
        this.isDragging = false;
      }
    },
    isDrawingChange(e) {
      console.log(e, "修改了isDrawing");

      this.isDrawing = e;
    },

    updateObjectivelistdata(data) {
      this.objectivelistdata = data;
    },
  },
  beforeDestroy() {
    // 组件销毁时移除监听，防止内存泄漏
    document.removeEventListener("click", this.handleClickOutside);
  },
  components: {
    ImageSelector,
    Modelheader,
    Btchaddobjective,
    Btcheditobjective,
  },
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
.header {
  padding: 0 40px;
  height: 48px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  background: #2379f6;
  font-size: 16px;
}
.header h3 {
  font-weight: normal;
  font-size: 16px;
}
.header p {
  display: flex;
}
.header p b {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 134px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  border: 1px solid #ffffff;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
  margin-right: 14px;
}
.header p b img {
  width: 16px;
  margin-right: 8px;
}
.header p em {
  display: inline-block;
  width: 76px;
  height: 32px;
  background: #ffffff;
  border-radius: 17px;
  border: 1px solid #ffffff;
  color: #2379f6;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
}
.tabNav {
  padding: 0 40px;
  height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px 0 10px;
  background: #fff;
}
.tabNav ul {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.tabNav ul li {
  padding: 0 20px;
  cursor: pointer;
  line-height: 38px;
  color: #557292;
  position: relative;
}
.tabNav ul li:hover,
.tabNav ul li.hover {
  color: #2a303b;
}
.tabNav ul li:hover::after,
.tabNav ul li.hover::after {
  content: "";
  width: 24px;
  height: 4px;
  background: #295cff;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.tabNav span {
  display: inline-block;
  width: 140px;
  height: 34px;
  background: #f2f6fb;
  border-radius: 10px;
  border: 1px solid #295cff;
  font-weight: 500;
  font-size: 14px;
  color: #295cff;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
}
/* 上传 */
.uploadMarks {
  box-sizing: border-box;
  background: #f4f7fd;
  width: 100vw;
  height: calc(100vh - 102px);
  position: relative;
}
.smcsbutton {
  width: 124px;
  height: 34px;
  background: #2379f6;
  border-radius: 10px;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  border: none;
  /* margin:24px 0 0 24px; */
  position: absolute;
  padding: 0;
  left: 24px;
  top: 24px;
}
.boxcenter {
  display: flex;
  justify-content: space-between;
}
.uploadcardInfo {
  width: 480px;
  height: calc(100vh - 102px);
  background: #fff;
  position: relative;
  box-shadow: 0 4px 16px 0 #5572921a;
  overflow-y: auto;
}
.examboxbutton {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 54px;
  background: #e8f0fa;
  position: absolute;
  left: 0;
  bottom: 0;
}
.examboxbutton >>> .el-button {
  width: 124px;
  height: 34px;
  border-radius: 10px;
  padding: 0;
  margin: 0;
  font-size: 12px;
  border: 1px solid #295cff;
  color: #295cff;
  background: none;
}
.examboxbutton >>> .el-button:first-child {
  background: #295cff;
  border: 1px solid #295cff;
  color: #fff;
}
.examboxbutton >>> .el-button:nth-child(2) {
  margin: 0 8px;
}
.examboxbutton1 {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 54px;
  background: #e8f0fa;
  position: absolute;
  left: 0;
  bottom: 0;
  justify-content: center;
}
.examboxbutton1 >>> .el-button {
  width: 124px;
  height: 34px;
  border-radius: 10px;
  padding: 0;
  margin: 0;
  font-size: 12px;
  border: 1px solid #295cff;
  color: #295cff;
  background: none;
}
.examboxbutton1 >>> .el-button:first-child {
  background: #295cff;
  border: 1px solid #295cff;
  color: #fff;
}
.examboxbutton1 >>> .el-button:nth-child(2) {
  margin: 0 8px;
}
.uploadcardInfo h3 {
  border-bottom: solid 1px #d8e4f0;
  padding: 18px 24px 14px;
  color: #2a303b;
  font-weight: normal;
  margin: 0;
}
.uploadCardimage {
  width: calc(100% - 460px);
  height: calc(100vh - 102px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
.uploadCardimage span {
  display: block;
  width: 100%;
  text-align: center;
}
.uploaddiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.uploaddivattention {
  font-size: 14px;
  color: #b3b8c2;
}
.cropperBox {
  height: calc(100vh - 102px);
  display: flex;
}
.cropperImageset {
  width: calc(100% - 480px);
  /* height:calc(100vh - 102px); */
  overflow: scroll;
  position: relative;
}
/* 纵向滚动条宽度 */
/* 纵向滚动条宽度 */
.cropperImageset::-webkit-scrollbar {
  width: 12px; /* 控制纵向滚动条的宽度 */
  height: 12px; /* 控制横向滚动条的高度 */
}

/* 横向滚动条高度 */
.cropperImageset::-webkit-scrollbar-thumb {
  height: 8px; /* 单独调整横向滚动条滑块高度 */
}

/* 滚动条轨道 */
.cropperImageset::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 滚动条滑块 */
.cropperImageset::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 6px;
}

/* 鼠标悬停时滑块样式 */
.cropperImageset::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}
.routate {
  position: absolute;
  left: 50px;
  top: 5px;
  background: #fff;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 10px 0 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  font-size: 14px;
  color: #557292;
  border-radius: 10px;
  z-index: 10;
}
.routate >>> .el-select,
.routate >>> .el-input {
  width: 150px;
}
.routate >>> .el-select {
  margin-right: 10px;
}
.routate >>> .el-input {
  margin-left: 10px;
  margin-right: 10px;
}
.routate >>> .el-button {
  border-radius: 10px;
  height: 35px;
  width: 55px;
  padding: 0;
  margin-left: 10px;
}
.routate >>> .el-input__inner {
  border-radius: 10px;
  height: 35px;
}
.image-preview img {
  box-sizing: border-box;
  width: 150px;
  height: 150px;
  background: #ffffff;
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
  color: #295cff;
  cursor: pointer;
  margin: 22px;
}
.searchlist {
  box-sizing: border-box;
  width: auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  height: 54px;
  background: #ffffff;
  border-radius: 10px;
  padding: 0 24px;
  align-items: center;
}
.searchlist {
  padding-left: 20px;
  display: flex;
  align-items: center;
  justify-content: left;
}
.searchlist a {
  display: block;
  color: #557292;
  font-size: 14px;
  /* width:100px; */
  text-align: center;
  position: relative;
  line-height: 52px;
  padding: 0 15px;
}
.searchlist a:hover,
.searchlist a.hover {
  color: #295cff;
}
.searchlist a:hover::after,
.searchlist a.hover::after {
  content: "";
  width: 24px;
  height: 4px;
  background: #295cff;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.boxsetetid {
  display: flex;
  align-items: center;
}
.boxsetetid >>> .el-input__inner {
  width: 90px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #295cff;
  font-weight: 500;
  font-size: 14px;
  color: #295cff;
}
.boxsetetid >>> .el-select .el-input .el-select__caret {
  color: #295cff;
}
.boxsetetid >>> .el-input__icon {
  line-height: 34px;
}
.boxsetetid >>> .el-button {
  padding: 0;
  width: 96px;
  height: 34px;
  background: #295cff;
  border-radius: 10px;
  color: #fff;
  line-height: 34px;
  margin: 0 10px;
}
.breadBox >>> .el-breadcrumb__inner a,
.breadBox >>> .el-breadcrumb__inner.is-link {
  font-weight: normal;
}
.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: bold;
}
.examnumberset {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0 0 20px;
}
.examnumberset li {
  width: 20px;
  height: 20px;
  border: 1px solid #295cff;
  border-radius: 2px;
  text-align: center;
  line-height: 20px;
  color: #1a48db;
  cursor: pointer;
  margin: 5px 10px 5px 0;
}
.examnumberset li:hover,
.examnumberset li.hover {
  background: #1a48db;
  color: #fff;
}
.examnumberset li.red {
  border: solid 1px #ec555a;
  color: #fff;
}
.examnumbercontent {
  padding-top: 15px;
  cursor: pointer;
}
.examnumbercontent b {
  display: block;
  padding: 1px 20px 0;
  font-size: 14px;
  color: #5b6371;
  font-weight: normal;
}
.examnumbercontent b i {
  font-style: normal;
  color: #ec555a;
}
.examnumbercontent b i.hover {
  color: #27b787;
}
.examnumbercontent:hover,
.examnumbercontent.hover {
  background: #e8f0fa;
}
.nameexamnum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;
}
.nameexamnum i {
  display: inline-block;
  width: 44px;
  height: 20px;
  background: #1a48db;
  border-radius: 2px;
  line-height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
  font-style: normal;
  cursor: pointer;
}
.nameexamnum span {
  display: inline-block;
  width: 44px;
  height: 20px;
  background: #ec555a;
  border-radius: 2px;
  line-height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
  font-style: normal;
  margin-left: 10px;
  cursor: pointer;
}
.nameexamnumul {
  display: flex;
  align-items: center;
  padding: 0 0 0 20px;
  height: 20px;
}
.titlebnumber {
  display: block;
  font-style: normal;
  font-size: 14px;
  color: #5b6371;
  padding: 0 0 0 20px;
  font-weight: normal;
}
.locationmark {
  padding-top: 15px;
  cursor: pointer;
}
.locationmark:hover,
.locationmark.hover {
  background: #e8f0fa;
}
.nameexamnumul li {
  width: 64px;
  height: 20px;
  border: 1px solid #1a48db;
  border-radius: 2px;
  font-size: 12px;
  color: #1a48db;
  line-height: 20px;
  text-align: center;
  margin-right: 10px;
}
.nameexamnumul li.hover,
.nameexamnumul li:hover {
  background: #1a48db;
  color: #fff;
}
.nameexamnumul li.red {
  border: solid 1px #ec555a;
  color: #fff;
}
/* >>> .el-collapse-item__header, >>> .el-collapse, >>> .el-collapse-item__wrap{
    border:none
  } */
.custom-title1 {
  width: 100%;
  border-bottom: solid 1px #5572921a;
  padding: 15px 0;
  cursor: pointer;
}
.custom-title1 span,
.custom-title span {
  font-size: 16px;
  color: #2a303b;
}
.custom-title1 span.hover,
.custom-title span.hover {
  color: #1a48db;
}
.custom-title1 span i,
.custom-title span i {
  font-style: normal;
  color: #ec555a;
}
.templatePage {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
}
.templatePage1 {
  position: fixed;
  right: 500px;
  bottom: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
}
.imgbox {
  width: 32px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #dee1e7;
  border-radius: 2px;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  color: #557292;
  margin-right: 14px;
  cursor: pointer;
}
.imgbox:hover,
.imgbox.hover {
  background: #1a48db;
  border-radius: 2px;
  color: #fff;
}
.xinzeplxtbutton {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 54px;
  background: #e8f0fa;
  display: flex;
  width: 100%;
  align-items: center;
}
.xinzeplxtbutton span {
  display: inline-block;
  width: 126px;
  height: 34px;
  background: #1a48db;
  border-radius: 4px;
  margin-left: 14px;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
}
.xinzeplxtbutton span:last-child {
  border: 1px solid #1a48db;
  border-radius: 4px;
  color: #1a48db;
  background: none;
}
.kgtboxscorll {
  height: calc(100vh - 270px);
  overflow-y: auto;
}
.selectquestionitemHover span {
  display: block;
}
</style>